<template>
  <div class="accountInfos">
    <div class="accountInfo">
      <div>
        <img src="static/images/LDAP.png" alt="LDAP">
      </div>
      <div>
        <span>{{accountInfos["LDAP"]}}</span>
      </div>
    </div>
    <div class="accountInfo">
      <div>
        <img src="static/images/qq.jpg" alt="QQ">
      </div>
      <div>
        <span>{{accountInfos["QQ"]}}</span>
      </div>
    </div>
    <div class="accountInfo">
      <div>
        <img src="static/images/weixin.jpg" alt="WeiXin">
      </div>
      <div>
        <span>{{accountInfos["WX"]}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    userId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      accountInfos: { LDAP: "未关联", QQ: "未关联", WX: "未关联" },
      LDAPAccount: "未关联",
      QQAccount: "未关联",
      WeiXinAccount: "未关联"
    };
  },
  computed: {
    
  },
  created: function() {
    this.init();
    this.$emit("SetTitle", "外部账号");
    this.$emit("SetPageWidth", 600);
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    init() {
      window.$http.post(`${window.RPConfig.userCenter}/account/listByUserId?userId=` + this.userId).then(response => {
        if (response.data) {
          response.data.forEach(item => {
            this.accountInfos[item.accountType] = item.loginName;
          });
        }
      });
    }
  },
  watch: {},
  directives: {}
};
</script>

<style lang="less">
.accountInfos {
  margin-left: 60px;
  .accountInfo {
    height: 72px;

    div {
      display: inline-block;
      width: 70px;
      vertical-align: middle;

      span {
        font-size: 16px;
      }
    }
  }
}
</style>

